import './App.css';
import React, {Component} from "react";
import Header from "./components/header";
import Footer from "./components/footer";
import Main from "./components/main";

export default class App extends Component{
    //定义初始化数据
    state={mainList:[
            {id:'1',value:'吃饭',done:false},
            {id:'2',value:'睡觉',done:false},
            {id:'3',value:'敲代码',done:false}
        ]}
    //新增mainItem
    addMainItem=(mainItem)=>{
      const {mainList}=this.state
        this.setState({mainList:[mainItem,...mainList]})
    }
    //删除mainItem
    handleDelete=(ids)=>{
        let newMainList=this.state.mainList.filter(item=>!ids.includes(item.id))
        this.setState({mainList:newMainList})
    }
    //更新mainItem选中状态
    handleUpdate=(ids,done)=>{
        let newMainList=this.state.mainList.map(item=>{
            if(ids.includes(item.id)){
                return {...item,done:done}
            }else{
                return item
            }
        })
        this.setState({mainList:newMainList})
    }
     render(){
        const {mainList}=this.state
       return (
           <div className="todo-container">
               <div className="todo-wrap">
                   <Header addMainItem={this.addMainItem}></Header>
                   <Main mainList={mainList} handleDelete={this.handleDelete} handleUpdate={this.handleUpdate}></Main>
                   <Footer mainList={mainList} handleDelete={this.handleDelete} handleUpdate={this.handleUpdate}></Footer>
               </div>
           </div>
       );
   }
}
